<template>
    <view class="examplesOf">
        <view class="cadr_box">
            <view class="cadr_info">
               <image class="tou" src="../../../static/blindbox/001.png" mode=""></image> 
               <view class="detail">
                  <view class="name">海南炎煌纵横科技有限公司</view> 
                  <view class="code">
                      <view class="">编号</view>
                      <view class="">000000</view>
                  </view>
               </view>
            </view>
            <view class="card_content">
                <image class="card_fen" src="../../../static/other/2369.png" mode="scaleToFill"></image>
                <view class="num">持卡165天</view>
                <view class="card_name">奈雪の茶数字权益卡的名称</view>
            </view>
        </view>
        <view class="input_box">
            <view class="bt">转赠好友</view>
            <input class="phoneBox" type="text"  v-model="phone" placeholder="请输入好友的手机号" placeholder-class="hui"/>
            <view class="btn">查询好友信息</view>
        </view>
        <view class="resultsBox">
            <!-- <view class="noName">您的好友未进行实名认证，快去提醒他吧。</view> -->
            <view class="res">
                <view class="txt">好友姓名：张*冠</view>
                <view class="txt">钱包地址：x3fc09ae59f17fcf2f4ac1985cb92f3d7de6cb33</view>
                <view class="txt1">
                    <text>您确定向x3fc09ae59f17fcf2f4ac1985cb92f3d7de6cb33地址转赠1张</text>
                    <text style="color:#1557F2;">编号0001奈雪の茶权益卡</text>
                </view>
            </view>
        </view>
        <view class="botBox">
            <view class="tips">
                <text>温馨提示：</text>
                <text>一旦发起NFR转赠，转赠后不可撤销，将不再显示数字藏品</text>
            </view>
            <view class="btn">
                <view class="tou" v-if="isSubmit"></view>
                <text @click="handleSubmit">确认转赠</text>
            </view>
        </view>
        <DetailDialog ref="pupop" title="请支付转赠费用" @confirm="handleConfirm">
            <view class="" slot="one">
                <view class="moneyBox" >
                    <view class="money">
                       <text>现金：</text>
                       <text>￥50.00</text> 
                    </view>
                    <!-- <view class="integral">
                        <view class="intLable">
                            <image src="../../../static/my/shenye_icon.png" mode=""></image>
                            <text>神椰coin：</text>
                        </view>
                        <text class="num">￥50.00</text> 
                    </view> -->
                </view>
                <view class="btnBox">
                    <view class="btn">确认支付</view>
                </view>
            </view>
        </DetailDialog>
    </view>
</template>

<script>
    import DetailDialog from '../equity-card/components/DetailDialog.vue'
    export default {
        components: {
          DetailDialog,
        },
        data() {
            return {
                phone: '18642883370',
                loading: true,
                isSubmit: false,
            }
        },
        methods: {
            //转赠
            handleSubmit(){
                this.$refs['pupop'].open()
            },
        }
    }
</script>

<style scoped>
.examplesOf{
    color: #FCFCFD;
    padding: 0 32rpx 100rpx 32rpx;
}
.cadr_box{
    background: #fff;
    border-radius: 32rpx;
    box-shadow: 0px 4px 8px #EAEAEA;
    margin-top: 28rpx;
    padding: 30rpx;
}
.cadr_info{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.cadr_info .tou{
    width: 68rpx;
    height: 68rpx;
    border-radius: 50%;
}
.cadr_info .detail{
    margin-left: 22rpx;
}
.cadr_info .detail .name{
    font-size: 24rpx;
    color: #000;
}
.cadr_info .detail .code{
    display: inline-flex;
    height: 30rpx;
    justify-content: flex-start;
    border: 2rpx solid #F1C67F;
}
.cadr_info .detail .code view:nth-child(1){
    background: linear-gradient(90deg, #F0C57D 3.45%, #F8E2B1 100%);
    height: 30rpx;
    line-height: 30rpx;
    width: 60rpx;
    text-align: center;
    font-size: 20rpx;
    color: #824806;
}
.cadr_info .detail .code view:nth-child(2){
    height: 30rpx;
    line-height: 30rpx;
    padding: 0 10rpx;
    font-size: 20rpx;
  color: #CB7F00;
}
.card_content{
    width: 100%;
    height: 314rpx;
    border-radius: 16rpx;
    margin-top: 24rpx;
    position: relative;
}
.card_content .card_fen{
    width: 100%;
    height: 100%;
    border-radius: 16rpx;
}
.card_content .num{
    position: absolute;
    top: 20rpx;
    right: 0;
    height: 36rpx;
    background: #000000;
    opacity: 0.5;
    color: #FFFFFF;
    font-size: 20rpx;
    line-height: 36rpx;
    padding: 0 20rpx;
    border-top-left-radius: 40rpx;
    border-bottom-left-radius: 40rpx;
}
.card_content .card_name{
    position: absolute;
    bottom: 0;
    width: 100%;
    height:68rpx;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.53) 58.82%);
    border-radius: 0px 0px 12px 12px;
    text-indent: 22rpx;
    line-height: 68rpx;
    font-size: 26rpx;
    color: #fff;
}
.input_box{
    margin-top: 30rpx;
    box-shadow: 0px 4px 8px #EAEAEA;
    border-radius: 16px;
    padding: 28rpx 40rpx;
    background-color: #FFF;
}
.input_box .bt{
    font-size: 30rpx;
    color: #222;
    margin-bottom: 30rpx;
}
.input_box .phoneBox{
    width: 100%;
    height: 92rpx;
    border: 2rpx solid #C2C2C2;
    border-radius: 80rpx;
    font-size: 32rpx;
    color: #222;
    padding-left: 32rpx;
    box-sizing: border-box;
}
.input_box .hui{
    color: #999;
}
.input_box .btn{
    width: 100%;
    height: 92rpx;
    border: 2rpx solid #1085F2;
    border-radius: 80rpx;
    margin-top: 40rpx;
    color: #0B87F2;
    font-size: 34rpx;
    text-align: center;
    line-height: 92rpx;
}
.resultsBox{
    
}
.noName{
    padding: 120rpx 0;
    width: 100%;
    text-align: center;
    font-size: 30rpx;
    color: #898989;
}
.res{
    display: flex;
    flex-direction: column;
   font-size: 30rpx;
   color: #898989; 
   padding: 40rpx 0;
}
.res .txt{
    word-break:break-all;
    word-wrap:break-word;
}
.res .txt1{
    word-break:break-all;
    word-wrap:break-word;
    font-size: 30rpx;
    color: #222;
    margin-top: 40rpx;
}
.botBox{
   
    padding: 0 36rpx;
    box-sizing: border-box;
    left: 0;
    width: 100%;
    background: #fff;
}
.botBox .tips{
    font-size: 26rpx;
    color: #FF3A3A;
    margin-bottom: 40rpx;
}
.botBox .btn{
    width: 606rpx;
    height: 92rpx;
    line-height: 92rpx;
    text-align: center;
    background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
    font-size: 34rpx;
    color: #fff;
    margin: 0 auto;
    border-radius: 100rpx;
    position: relative;
}
.botBox .tou{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFF;
    opacity: 0.4;
}
.botBox  text{
    display: block;
    width: 100%;
    height: 100%;
}
.moneyBox{
    margin-top: 54rpx;
}
.moneyBox .money{
    display: flex;
    justify-content: center;
    align-items: center;
}
.moneyBox .money text:nth-child(1){
    font-size: 36rpx;
    color: #222;
}
.moneyBox .money text:nth-child(2){
    font-size: 56rpx;
    color: #FF3A3A;
}
.moneyBox .integral{
    display: flex;
    justify-content: center;
    align-items: center;
}
.moneyBox .integral .intLable{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.moneyBox .integral .intLable image{
    width: 44rpx;
    height: 44rpx;
}
.moneyBox .integral .intLable  text{
    font-size: 36rpx;
    color: #222;
}
.moneyBox .integral .num{
    font-size: 56rpx;
    color: #FF3A3A;
}
.btnBox{
    display: flex;
    justify-content: center;
    margin-top: 88rpx;
    width: 100%;
}
.btnBox .btn{
    width: 370rpx;
    height: 92rpx;
    text-align: center;
    line-height: 92rpx;
    background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
    border-radius: 80rpx;
    margin-bottom: 40rpx;
}
</style>
